<%--
  Created by IntelliJ IDEA.
  User: 云哥
  Date: 2023/6/7
  Time: 16:03
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用ajax进行异步登录</title>
</head>
<body>
<form id="loginForm">
    <div>
        <label for="username"> 账号：</label>
        <input id="username" type="text" name="username">
    </div>
    <div>
        <label for="password"> 密码：</label>
        <input id="password" type="password" name="password">
    </div>
    <div>
        <button type="submit">登录</button>
        <button type="reset">取消</button>
    </div>
</form>
<%--使用ajax发送异步登录请求--%>
<script src="statics/js/jquery-3.7.0.js"></script>
<script>
    $(function () {
        $('#loginForm').submit(function () {
            //1.获取表单参数
            let username = $('#username').val().trim();
            let password = $('#password').val().trim();
            //2.非空验证
            if (username == '' || password == '') {
                alert('账号密码不能为空');
                return false;
            }
            //3.发送ajax请求
            // $.get()
            // $.post()
            // $.getJSON()
            // $(document).load()
            $.ajax({
                url: 'loginServlet',//发送请求的服务端地址 Servlet
                type: 'post',//客户端发送请求的方式（get/post）
                data: {loginName: username, loginPwd: password},//客户向服务端发送的数据（账号/密码）
                dataType: 'JSON',//客户端与服务端交互的数据格式（json、xml、text）
                success: function (data) {//成功后的回调函数；data：服务端返回的结果
                    //alert('服务端返回的结果：' + data);
                    if (data.code == 200) {
                        alert(data.msg);
                        location.href = 'welcome.jsp';
                    } else if (data.code == 400) {
                        alert(data.msg);
                    } else {
                        alert('登录失败！')
                    }

                }, error: function () {
                    alert('网络错误！');
                }
            })
            //保持页面无刷
            return false;
        });
    })
</script>
</body>
</html>
